<template>
  <div class="menu pc-container">
    <div class="inner-container">
      <template v-for="(item, _) in menu.item" :key="_">
        <el-tooltip
          class="box-item"
          effect="dark"
          :content="item.name"
          placement="top"
        >
          <div class="menu-item" @click="to(item.path)">
            <SvgIcon
              :name="item.url"
              :class="{ icon: !item.isActive, 'icon-active': item.isActive }"
            ></SvgIcon>
          </div>
        </el-tooltip>
        <div v-if="menu.item[_ + 1]" class="gap"></div>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, getCurrentInstance, reactive, watch } from 'vue';
import { createCurve } from '../utils/curve';
import { useRouter } from 'vue-router';
import SvgIcon from '@/components/SvgIcon.vue';
// @ts-ignore
import useRouterStore from '@/store/modules/router.store';
import useLanguageStore from '@/store/modules/language.store.ts';

const router = useRouter();
const { $t } = getCurrentInstance()?.proxy as any;

const menu = reactive({
  item: [] as any[]
});

function setMenu() {
  menu.item = [
    { name: $t('nav.index'), path: '/', url: 'index', isActive: true },
    { name: $t('nav.talk'), path: '/talk', url: 'talk', isActive: false },
    { name: $t('nav.about'), path: '/about', url: 'about', isActive: false },
    {
      name: $t('nav.archive'),
      path: '/archive',
      url: 'archive',
      isActive: false
    },
    { name: $t('nav.tags'), path: '/tags', url: 'tags', isActive: false },
    {
      name: $t('nav.message'),
      path: '/message',
      url: 'message',
      isActive: false
    },
    { name: $t('nav.friend'), path: '/friend', url: 'friend', isActive: false },
    { name: $t('nav.album'), path: '/album', url: 'album', isActive: false }
  ] as any[];
}

function to(path: string) {
  router.push(path);
  menu.item.forEach((item) => {
    item.isActive = item.path === path;
  });
}

watch(
  () => useLanguageStore().language,
  () => {
    setMenu();
  }
);

onMounted(() => {
  setMenu();
  const currentPath = useRouterStore().currentPath;
  menu.item.forEach((item) => {
    item.isActive = item.path === currentPath;
  });
  const docker = document.querySelector('.menu');
  const items = document.querySelector('.inner-container')!.children;
  const range = 300;
  const maxScale = 1.5;

  docker?.addEventListener(
    'mousemove',
    (e: any) => {
      const curve = createCurve(range, e.clientX, 1, maxScale);
      layout(curve);
    },
    { passive: true }
  );

  docker?.addEventListener(
    'touchmove',
    (e: any) => {
      const curve = createCurve(range, e.touches[0].clientX, 1, maxScale);
      layout(curve);
    },
    { passive: true }
  );

  function layout(curve: any) {
    for (let i = 0; i < items.length; i++) {
      const item = items[i] as HTMLElement;
      const rect = item.getBoundingClientRect();
      const x = rect.left + rect.width / 2;
      const scale = curve(x);
      const marginBottom = scale * 15 - 15;
      item.style.setProperty('--scale', scale.toString());
      item.style.setProperty('--margin-bottom', `${marginBottom}px`);
    }
  }

  docker?.addEventListener('mouseleave', () => {
    layout(() => 1);
  });

  docker?.addEventListener('touchend', () => {
    layout(() => 1);
  });
});
</script>

<style scoped lang="less">
.menu {
  width: 75vw;
  height: 80px;
  border-radius: 10px;
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--background-secondary);
  box-shadow: var(--crane-ring-offset-shadow, 0 0 #0000),
    var(--crane-ring-shadow, 0 0 #0000), var(--crane-shadow);
  opacity: 0.9;
  backdrop-filter: blur(30px) brightness(1.5) saturate(180%);
  z-index: 100000000000000000;
  display: flex;
  justify-content: center;
  align-items: center;

  .inner-container {
    width: auto;
    height: 80%;
    display: flex;
    align-items: end;

    .menu-item {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15px;
      width: calc(var(--i, 1) * 60px);
      height: calc(var(--i, 1) * 60px);

      animation: menu-item-animation 0.3s ease;
      transform-origin: center bottom;
      transform: scale(var(--scale, 1));
      margin-bottom: var(--margin-bottom, 0px);

      cursor: pointer;

      padding: 15px;
      box-sizing: border-box;

      img {
        height: 100%;
        width: 100%;
        border-radius: 15px;
      }

      .icon {
        width: 90%;
        height: 90%;
        color: var(--font-color);
      }

      .icon-active {
        width: 90%;
        height: 90%;
        color: #f184f6;
      }
    }

    @keyframes menu-item-animation {
      from {
        transform: scale(1);
        margin-bottom: 0;
      }
      to {
        transform: scale(var(--scale, 1));
        margin-bottom: var(--margin-bottom, 0px);
      }
    }

    .gap {
      width: calc(var(--i, 1) * 50px);
      height: 50px;
    }
  }
}

@media (max-width: 1161px) {
  /* 在宽度小于或等于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .pc-container {
    display: none;
  }

  .mobile-container {
    display: block;
  }
}

@media (min-width: 1160px) {
  /* 在宽度大于 1035px 的屏幕上应用以下样式 */
  /* 在这里添加你的样式规则 */
  .pc-container {
    display: flex;
  }

  .mobile-container {
    display: none;
  }
}
</style>
